<template>
    <div>
        <div v-for="(item, index) in list" class="tr">
            <GoodsInput v-model:goods-id="item.goodsId"
            v-model:goods-price="item.goodsPrice"
            v-model:goods-name="item.goodsName"
            @change="goodsChange"
            style="width: 300px; margin: 0 20px 0 0;"
            ></GoodsInput>
            <a-input-number v-model:value="item.goodsNum" @change="numChange" :min="1" style="width:200px" placeholder="请输入数量"></a-input-number>
            <a-button @click="remove(index)" type="link" danger>删除</a-button>
        </div>
        <a-button @click="add" type="primary">添加</a-button>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import GoodsInput from './goodsInput.vue';
import { Form } from 'ant-design-vue';
const formItemContext = Form.useInjectFormItemContext();
const list = defineModel<any[]>("list", {default: []})

const add = () => {
    list.value.push({})
    formItemContext.onFieldChange()
}
const remove = (index:number) => {
    list.value.splice(index, 1)
    formItemContext.onFieldChange()
}
const numChange = () => {
    formItemContext.onFieldChange()
}
const goodsChange = () => {
    formItemContext.onFieldChange()
}

onMounted(() => {
    if(!list.value){
        list.value = [{}]
    }
    if(list.value.length == 0){
        add()
    }
})
</script>
<style scoped >
.tr{
    display: flex;
    align-items: center;
    padding: 0 0 10px 0;
}
</style>